<template>
  <div class="dispatchList">
    <div class="change_box">
      <div class="title">
        <p class="tip">批量调度</p>
        <button class="goBack" @click="back">返回</button>
      </div>
      <div class="main">
        <el-container>
          <el-header>
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              router
              @select="handleSelect"
            >
              <el-menu-item index="/dispatchList/Nopunctual">超时未启动</el-menu-item>
              <el-menu-item index="/dispatchList/Step_Run_timeout">步骤运行超时</el-menu-item>
              <el-menu-item index="/dispatchList/Timeout_out_over">超时未结束</el-menu-item>
              <el-menu-item index="/dispatchList/CurrentError">当前报错系统</el-menu-item>
              <el-menu-item index="/dispatchList/InOperation">运行中</el-menu-item>
              <el-menu-item index="/dispatchList/startover">待启动</el-menu-item>
              <el-menu-item index="/dispatchList/complete">已完成</el-menu-item>
              <el-menu-item index="/dispatchList/Cumulative_error">报错累计</el-menu-item>
              <el-menu-item index="/dispatchList/Accumulated_timeout">超时累计</el-menu-item>
            </el-menu>
          </el-header>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  const router = useRouter();
  const route = useRoute();
  const activeIndex = ref(route.path);
  const handleSelect = (key: any) => {
    activeIndex.value = key;
  };
  const back = () => {
    router.push({
      name: 'restructure'
    });
  };
</script>

<style scoped lang="less">
  .dispatchList {
    width: 100%;
    height: 100vh;
    background: #eaeef4;
    padding: 20px;
    box-sizing: border-box;
    //background-image: url("../../assets/images/background-image.jpg");
    .change_box {
      height: 100%;
      .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        .tip {
          height: 34px;
          line-height: 34px;
          font-size: 18px;
          font-weight: 400;
          color: #46545d;
          margin: 0;
          padding: 0;
        }
        .goBack {
          background: #007af5;
          width: 80px;
          height: 34px;
          border: none;
          color: #fff;
          font-size: 12px;
          font-weight: 400;
        }
      }
      .tabs_item {
        height: calc(100% - 50px);
        background: #fff;
        padding: 20px;
        box-sizing: border-box;
        :deep(.el-tabs) {
          height: 100%;
          .el-tabs__header {
            .el-tabs__nav-wrap::after {
              width: 0;
            }
            .el-tabs__nav-wrap {
              .el-tabs__nav-scroll {
                .el-tabs__nav {
                  .el-tabs__active-bar {
                    height: 2px;
                  }
                  .el-tabs__item {
                    font-size: 16px;
                    font-weight: 400;
                    color: #46545d;
                    &.is-active {
                      font-weight: bold;
                      color: #007af5;
                    }
                  }
                }
              }
            }
          }
          .el-tabs__content {
            height: calc(100% - 40px);
            .el-tab-pane {
              height: 100%;
            }
          }
        }
      }
      .main {
        background: #fff;
        height: calc(100% - 50px);
        .el-container {
          height: 100%;
          .el-header {
            .el-menu--horizontal {
              border-bottom: none;
              .el-menu-item {
                font-size: 16px;
                font-weight: 400;
                color: #46545d;
                &.is-active {
                  font-size: 16px;
                  font-weight: bold;
                  color: #007af5;
                  border-bottom: 2px solid #007af5;
                }
              }
              :deep(.el-menu-item:hover) {
                background-color: none;
              }
            }
          }
        }
      }
    }
  }
</style>
